(() => {
    new Vue({
        el: '#line2',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            stu_nameArr: [],
            course_flunkArr: [],             
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getFlunk/getDashujuFlunk'),                       
                        axios.get('http://localhost:8001/getFlunk/getJisuanjiyingyongFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getRuanjiangongchengFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getRuanjianjishuFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getWangluogongchengFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getWangluojishuFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getWulianwangFlunk'),
                        axios.get('http://localhost:8001/getFlunk/getXinxiguanliFlunk'),
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //分别把相应专业的stu_name取出为列表
            getStu_name() {
                arr = []
                this.stu_nameArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.stu_nameArr.push(arr[i].stu_name)
                    }
                }, 555)
                // console.log("this.stu_nameArr:",this.stu_nameArr)
            },

            //分别把相应专业的avgScore取出为列表
            getCourseFlunk() {
                arr = []
                this.course_flunkArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.course_flunkArr.push(arr[i].course_flunk)
                    }
                }, 555)
                // console.log("this.course_flunkArr:", this.course_flunkArr)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.getElementById('line2')),
                    option = {
                        legend: {
                            right: '0',
                            top: 0,
                            textStyle: {
                                color: "rgba(250,250,250,0.6)",
                                fontSize: 9
                            }
                        },
                        tooltip: {
                            trigger: 'axis'		
                        },
                        grid: {
                            top: '15%',
                            // bottom : 0,
                            height: 100,
                            width: 'auto'
                        },
                        xAxis: [{
                            type: 'category',
                            data: this.stu_nameArr,
                            axisLine: {
                                lineStyle: {
                                    show: false
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: { //  改变x轴字体颜色和大小
                                            textStyle: {
                                                color: "rgba(250,250,250,0.6)",
                                                fontSize: 9
                                            },
                                        },
                            boundaryGap: false
                
                        }, ],
                        yAxis: [{
                            type: 'value',
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(250,250,250,0.6)',
                                    width: 0.3
                                },
                            },
                            axisLabel: {
                                textStyle: {
                                    color: "rgba(250,250,250,0.6)",
                                    fontSize: 9
                                }			
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#0173DA',
                                    width: 0.3
                
                                }
                            },
                        }],
                        series: [{
                            name: '挂科数量',
                            type: 'line',
                            data: this.course_flunkArr,
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            lineStyle: {
                                width: 2,
                                color: '#00DAFF',
                            },
                            itemStyle: {
                                normal: {
                                    color: '#00DAFF',
                                    borderColor: '#00DAFF',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: '#00DAFF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,0,0,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                        }],
                    };
                
                
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======

            

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getStu_name()
                    this.getCourseFlunk()
                    this.drawEcharts()
                }
            }
           

        }

    })
})();